<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery"
            ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between">
          <div>
            <el-button type="success" @click="openDialog()"
              ><i-ep-plus />新增</el-button
            >
          </div>
        </div>
      </template>

      <el-table
        v-loading="loading"
        :data="tableList"
        highlight-current-row
        border
      >
        <!-- <el-table-column type="selection" width="50" align="center" /> -->
        <el-table-column
					label="序号"
          type="index"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          key="name"
          label="姓名"
          align="center"
          prop="name"
          width=""
        />
        <el-table-column
          key="cardNumber"
          label="身份证号码"
          align="center"
          prop="cardNumber"
          width=""
        />
        <el-table-column
          key="gender"
          label="性别"
          align="center"
          width=""
          prop="gender"
        >
          <template #default="scope">
            {{ genderFilter(scope.row.gender) }}
          </template>
        </el-table-column>
        <el-table-column
          key="nation"
          label="民族"
          width=""
          align="center"
          prop="nation"
        />
        <el-table-column
          key="mobile"
          label="联系电话"
          width=""
          align="center"
          prop="mobile"
        />
        <el-table-column
          key="birthday"
          label="出生日期"
          width=""
          align="center"
          prop="birthday"
        />
        <el-table-column
          key="maritalStatus"
          label="婚姻状况"
          width=""
          align="center"
          prop="maritalStatus"
        >
          <template #default="scope">
            {{ maritalStatusFilter(scope.row.maritalStatus) }}
          </template>
        </el-table-column>
        <el-table-column
          key="createTime"
          label="创建时间"
          width=""
          align="center"
          prop="createTime"
        />
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click="openDialog(scope.row.personId, '编辑')"
              ><i-ep-edit />编辑</el-button
            >
<!--            <el-button-->
<!--              type="primary"-->
<!--              link-->
<!--              size="small"-->
<!--              @click="handleDelete(scope.row.personId)"-->
<!--              ><i-ep-delete />删除</el-button-->
<!--            >-->
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <!-- 新增/修改弹窗 -->
    <addForm
      v-if="dialogAddOrEdit.visible && mobile !== 'mobile'"
			class="system"
			:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
      :dialog-add-or-edit="dialogAddOrEdit"
      @sendClose="sendClose"
    ></addForm>
    <addMobileForm
      v-if="dialogAddOrEdit.visible && mobile === 'mobile'"
			class="system"
			:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
      :dialog-add-or-edit="dialogAddOrEdit"
      @sendClose="sendClose"
    ></addMobileForm>
  </div>
</template>

<script lang="ts">
export default {
	name: "person",
};
</script>

<script lang="ts" setup>
import {ref, reactive, computed} from "vue";
import { getDicts } from "@/store/modules/dict";
import addForm from "@/views/corp/person/addForm.vue";
import addMobileForm from "@/views/corp/person/addMobileForm.vue";
import { CorpPersonListForm, ParamsType } from "@/api/corp/person/types";
import {
  getCorpPersonList,
  deleteCorpPerson,
} from "@/api/corp/person/index.ts";
import { useUserStore } from "@/store/modules/user";

import {useScreen} from "@/store/modules/screen";

const screenStore = useScreen()
const mobile = computed(() => ( screenStore.device ));
const screenHeight = computed(() => ( screenStore.screenHeight ));

function initScreen(){
}

const useUser = useUserStore();

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<CorpPersonListForm[]>();
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});
const currentUserId = useUser.objectId;

const dialogAddOrEdit = reactive<DialogOption>({
  visible: false,
  title: "新增企业人员",
  footBtn: "新增",
});

/* 列表查询 */
async function handleQuery() {
	loading.value = true;
  let list = await getCorpPersonList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
	loading.value = false;
}

/* 删除人员 */
async function handleDelete(personId) {
  let confirm = await ElMessageBox.confirm(
    '确认删除?',
    '删除提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(()=>true).catch(() => false)
  if(!confirm){
		ElMessage({
			type: 'info',
			message: '已取消！'
		})
    return;
  }
  let delInfo = await deleteCorpPerson(personId);
  if (delInfo.type === 0) {
    if (delInfo.success) {
      ElMessage.success("人员删除成功!");
      resetQuery();
    } else {
      ElMessage.error("人员删除失败!");
    }
  } else {
    ElMessage.error("人员删除失败!");
  }
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

/* 新增/编辑 */
function openDialog(personId, detail) {
  dialogAddOrEdit.visible = true;
  if (personId) {
    dialogAddOrEdit.title = "修改企业人员信息";
    dialogAddOrEdit.footBtn = "修改";
    dialogAddOrEdit.id = personId;
    dialogAddOrEdit.detail = detail;
  } else {
    dialogAddOrEdit.id = 0;
    dialogAddOrEdit.title = "新增企业人员信息";
    dialogAddOrEdit.footBtn = "新增";
  }
}

/* 关闭弹窗并刷新列表 */
function sendClose(query) {
  dialogAddOrEdit.visible = false;
	if(query){
		handleQuery();
	}
}

onMounted(() => {
	initScreen()
	
  handleQuery();
});

function genderFilter(genderValue) {
  let tempgender = gender.filter((item) => item.value === genderValue);
  if (tempgender[0] && tempgender[0].label) {
    return tempgender[0].label;
  }else{
    return ''
  }
}

function maritalStatusFilter(maritalStatusValue) {
  let tempMaritalStatus = maritalStatus.filter((item) => item.value === maritalStatusValue);
  if (tempMaritalStatus[0] && tempMaritalStatus[0].label) {
    return tempMaritalStatus[0].label;
  }else{
    return ''
  }
}
const gender = getDicts("gender"); //性别

const maritalStatus = getDicts("maritalStatus"); //婚姻状况
</script>

<style lang="less" scoped></style>
